<!doctype html>
<html lang="zh-cn">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>transform视差滚动</title>
  <!--  <link rel="stylesheet" href="./styles/index.css" />-->
</head>
<style>
  html {
    height: 100%;
    overflow: hidden;
  }

  body {
    margin: 0;
    padding: 0;
    perspective: 2px;
    transform-style: preserve-3d;
    transform-origin: center center;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .g-container {
    position: relative;
    height: 150%;
  }
  .g-container > div {
    font-size: 5vw;
    position: absolute;
    top: 20%;
  }
  .g-container .section-one {
    left: 0%;
    background: rgba(10, 10, 10, 0.2);
    transform: translateZ(-1px);
  }
  .g-container .section-two {
    left: 40%;
    background: rgba(30, 130, 30, 0.2);
    transform: translateZ(-2px);
  }
  .g-container .section-three {
    left: 90%;
    background: rgba(200, 100, 130, 0.2);
    transform: translateZ(-3px);
  }
  .g-container .section-four {
    left: 90%;
    background: rgba(200, 100, 130, 0.2);
    transform: translateZ(-10px);
  }
  .g-container .section-normal {
    left: 80%;
    background: rgba(200, 100, 130, 0.2);
  }

</style>
<body>
<div class="g-container">
  <div class="section-one">translateZ(-1)</div>
  <div class="section-two">translateZ(-2)</div>
  <div class="section-three">translateZ(-3)</div>
  <div class="section-four">translateZ(-10)</div>
  <div class="section-normal">normal</div>
</div>
</body>
</html>
